<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>延时提示框</title>
   <style>
     div{float:left;margin:10px;}
     #div1{width:50px;height:50px;background:red}
	 #div2{width:250px;height:180px;background:#CCC;display:none;}
   </style>
   <script>
     window.onload=function(){
	    var oDiv1=document.getElementById("div1");
		var oDiv2=document.getElementById("div2");
		var timer=null;
	    oDiv2.onmouseover=oDiv1.onmouseover=function(){
		   clearTimeout(timer);
		   oDiv2.style.display="block";
		};
		oDiv2.onmouseout=oDiv1.onmouseout=function(){
		    timer=setTimeout(function (){
			   oDiv2.style.display="none";
			},1000);
		   //oDiv2.style.display="none";
		};
		/*function(){
		   clearTimeout(timer);
		   oDiv2.style.display="block";
		};*/
		/*function(){
		   timer=setTimeout(function(){
		      oDiv2.style.display="none";
		   },1000);		   
		};*/
	    
	 };
   </script>
</head>
<body>
  <div id="div1"></div>
  <div id="div2"></div>

</body>
</html>